<template>
  <div class="bg">
    <nav-com
      title="充值记录"
      :showView='true'
      @back="backHandler()"
    ></nav-com>
    <div style="margin:10px 0 0 15px;" @click="changeDate">{{currentDate | yymmDateFormat}}</div>
    <div
      v-if="dataList.length == 0"
      style="margin:50px;text-align:center"
    >
      --暂无数据--
    </div>
    <div
      v-else
      v-for="item in dataList"
      :key="item.id"
    >
      <div
        class="dataList"
        v-if="item.status==1||item.status==2"
      >
        <div class="aaa">
          <div>
            <div class="title">{{item.pay_type_text}}</div>
            <div class="time">{{item.paytime_text }}</div>
          </div>
          <div class="num">
            +{{item.pay_fee}}
          </div>
        </div>
      </div>

    </div>
    <van-overlay
      :show="showTime"
      @click="show = false"
    >
      <van-datetime-picker
        class="time-picker"
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel='showTime=false'
        @confirm='confirm'
      />
    </van-overlay>
  </div>
</template>

<script>
import moment from "moment";
import navCom from "@/component/nav";
import { getrRechargeList } from "@/api/api";
export default {
  components: {
    navCom,
  },
  filters: {
    dateFormat(val) {
      return moment(val * 1000).format("YYYY-MM-DD");
    },
    yymmDateFormat(val) {
      return moment(val).format("yyyy年MM月");
    }
  },
  data() {
    return {
      showTime: false,
      minDate: new Date((2000, 1, 1)),
      maxDate: new Date(),
      currentDate: new Date(),
      title: "",
      dataList: [],
      page: 1,
    };
  },
  mounted() {
    console.log(22222);
    this.initData();
  },
  methods: {
     confirm(value) {
      this.showTime = false;
      this.currentDate = value;
      console.log(8888, this.currentDate);
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return val;
    },
    // 改变查询月份
    changeDate() {
      this.showTime = true;
    },
    backHandler() {
      this.$router.go(-1);
    },
    initData() {
      let queryData = {
        page: this.page,
        limit: 10,
      };
      console.log(queryData);
      getrRechargeList(queryData)
        .then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            console.log(33333);
            this.dataList = [...res.data.data.data, ...this.dataList];
            console.log(this.dataList);
            if (res.data.data.length > 0) {
              this.page += 1;
              this.initData();
            }
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
.time-picker {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.bg {
  position: relative;
  background: #f2f3f7;
  min-height: 100vh;
}
.dataList {
  background: #fff;
  margin: 10px 20px;
  padding: 10px 20px;

  border-radius: 8px;
}
.dataList .aaa {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dataList .aaa .title {
  width: 60vw;
  font-size: 17px;
  word-wrap: break-word;
}
.dataList .aaa .time {
  color: #ccc;
  font-size: 14px;
  margin-top: 10px;
}
.dataList .aaa .num {
  color: #fe4b20;
  font-size: 22px;
}
</style>